循环体|都会_javascript基本语法（持续补充）

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Javascript基本语法（持续补充）相关的知识，希望对你有一定的参考价值。

文章目录

• 一、引入Javascript
• 二、注释
• 三、变量
• • 1、变量命名
  • 2、变量声明
  
  
• 四、常用的数据类型
• • 1、数字类型
  • 2、字符串类型
  • • 1、字符串可以使用&＃43;进行拼接
    • 2、字符串支持索引取值&＃xff0c;但是不支持切片
    • 3、字符串的格式化输出
    • 4、字符串可以和数字相加
    
    
  • 3、数组类型
  • • 1、数组的定义有2种方式
    • 2、数组的操作
    • 3、数组的增删改查操作
    • • 添加数据&＃xff1a;
      • 删除数据
      • 替换数据
      
      
    • 4、数组的长度
    • 5、数组的过滤循环和查找的方法
    • • forEach方法&＃xff1a;遍历数组
      • filter方法&＃xff1a;过滤
      • find方法&＃xff1a;查找数据
      • findIndex方法&＃xff1a;查找数据的索引
      
      
    
    
  
  
• 五、常用的运算类型
• • 1、算术运算符
  • 2、赋值运算符
  • 3、比较运算符
  • 4、逻辑运算符
  
  
• 六、条件语句
• 七、函数
• • 1、函数的定义和调用
  • 案例
  • 2、函数的参数&＃xff1a;js中函数定义的参数和调用的参数可以不一致
  • 3、函数种的内置变量
  • 4、箭头函数,没有函数名
  
  
• 八、对象
• • 1.对象的定义
  • 2、对象中属性的获取
  • 3、对象中方法的获取
  • 4.对象中普通函数和箭头函数的区别
  
  
• 九、while循环
• • 1、语法&＃xff1a;
  • 案例
  
  
• 十、for循环
• • 1、for(语句1;语句2;语句3)&＃xff1a;条件循环
  • • 语法
    • 案例
    
    
  • 2、for-in&＃xff1a;遍历数组得到索引
  • • 语法
    • 案例
    
    
  • 3、for -of&＃xff1a;遍历数组得到值
  • • 语法
    • 案例
    
    
  • 4、遍历对象
  • • 语法
    • 案例
    
    
  
  

1、行间事件&＃xff08;主要用于事件&＃xff09;
2、页面script标签引入
3、外部引入js文件

<!--方式1-->
<button onclick&＃61;"alert(&＃39;你好2&＃39;)">按钮A</button>
<!--方式2-->
<script>
alert(&＃39;你好2&＃39;)
</script>
<!--方式三-->
<script src&＃61;"main.js">

二、注释

单行注释&＃xff1a;用//
多行注释用&＃xff1a;
/*
*/

1、变量命名

1、变量可以使用短名称&＃xff0c;也可以使用描述性更好的名称&＃xff0c;见名知意&＃xff1b;
2、推荐使用字母开头
3、变量名区分大小写
4、小驼峰式命名&＃xff08;maxAge&＃xff09;

2、变量声明

var&＃xff1a;定义一个普通的变量
let&＃xff1a;定义的变量&＃xff08;js中的代码块用包起来的&＃xff09;
const&＃xff1a;定义常量&＃xff08;定义之后不能修改&＃xff09;&＃xff0c;只能在定义的代码块内使用

数字&＃xff1a;number类型&＃xff08;小数、整数&＃xff09;
字符串&＃xff1a;String类型
数组&＃xff1a;Array类型&＃xff08;等同于python中的列表&＃xff09;
布尔值&＃xff1a;true和false&＃xff08;python中大写&＃xff09;
空&＃xff1a;null&＃xff08;等同于python中的None&＃xff09;

1、数字类型

数字格式化小数位数&＃xff1a;toFixed

2、字符串类型

1、字符串可以使用&＃43;进行拼接

2、字符串支持索引取值&＃xff0c;但是不支持切片

3、字符串的格式化输出

<script>
//字符串格式化输出
var name&＃61;&＃39;python&＃39;
//模板字符串&＃xff1a;&＃96;&＃96;
var desc&＃61;&＃96;study$name&＃96;
</script>


4、字符串可以和数字相加

数字自动转化位字符串类型&＃xff0c;进行拼接

3、数组类型

1、数组的定义有2种方式

var arr&＃61;[1,2,3,4,5,6]
var arr1&＃61;new Array(1,2,3,4,5,6)

2、数组的操作

支持索引取值&＃xff1a;arr[索引]
支持切片操作&＃xff1a;slice方法
arr.slice(1,3)

3、数组的增删改查操作

splice(参数1&＃xff0c;参数2&＃xff0c;参数3)
参数1&＃xff1a;起始位置索引
参数2&＃xff1a;表示删除几个数据
参数3-n&＃xff1a;表示往数组中添加的数据

添加数据&＃xff1a;

push方法&＃xff0c;添加到数组的最后面&＃xff0c;可以添加任意类型的数据
splice方法&＃xff1a;往指定位置添加数据
arr.splice(3,0,‘数据’)&＃xff1a;指定位置增加数据&＃xff0c;

删除数据

获取数组中的数据&＃xff08;删除&＃xff09;&＃xff1a;
pop方法&＃xff0c;从数组尾部弹出一个数据
splice方法&＃xff1a;删除指定位置的数据
arr.splice(2,1)

替换数据

splice(3,1,‘hello’)&＃xff1a;将索引为3的数字&＃xff0c;替换为hello&＃xff0c;只替换1个

4、数组的长度

length属性
arr.length

5、数组的过滤循环和查找的方法

forEach方法&＃xff1a;遍历数组

自动遍历数组&＃xff0c;接收的参数是一个回调函数&＃xff0c;每遍历出来一个数据&＃xff0c;执行一次回调函数
回调函数可以接收3个参数
value&＃xff1a;遍历出来的数据值
index&＃xff1a;遍历出来的数据索引
array&＃xff1a;数据本身

var arr&＃61;[1,2,3,4,5,6]
arr.forEach(function(value,index,array)
console.log(&＃96;值为$value,索引为$index,array:$array&＃96;)
)


filter方法&＃xff1a;过滤

自动遍历数组&＃xff0c;接收的参数是一个回调函数&＃xff0c;每遍历出来一个数据&＃xff0c;
执行一次回调函数&＃xff0c;根据回调函数返回的结果是是true还是false来对数组进行过滤
回调函数可以接收3个参数
value&＃xff1a;遍历出来的数据值
index&＃xff1a;遍历出来的数据索引
array&＃xff1a;数据本身

三种写法

var arr2&＃61;[1,2,3,4,5,6]
var arr&＃61;arr2.filter(function(value)
return value>3
)
var arr&＃61;arr2.filter((value)&＃61;>
return value>3
)
var arr&＃61;arr2.filter(value&＃61;>value>3)


find方法&＃xff1a;查找数据

自动遍历数组&＃xff0c;接收的参数是一个回调函数&＃xff0c;每遍历出来一个数据&＃xff0c;
执行一次回调函数&＃xff0c;返回第一个符合条件的数据
回调函数可以接收3个参数
value&＃xff1a;遍历出来的数据值
index&＃xff1a;遍历出来的数据索引
array&＃xff1a;数据本身

var arr&＃61;[
id:1,&＃39;name&＃39;:&＃39;kobe&＃39;,
id:2,&＃39;name&＃39;:&＃39;kobe1&＃39;,
id:3,&＃39;name&＃39;:&＃39;kobe2&＃39;,
]
//需求查找数组中id为2的数据
var result&＃61;arr.find(function(value)
return value.id&＃61;&＃61;&＃61;2
)
console.log(&＃39;结果&＃xff1a;&＃39;,result)
var result&＃61;arr.find((value)&＃61;>
return value.id&＃61;&＃61;&＃61;2
)
console.log(&＃39;结果&＃xff1a;&＃39;,result)


findIndex方法&＃xff1a;查找数据的索引

var arr&＃61;[
id:1,&＃39;name&＃39;:&＃39;kobe&＃39;,
id:2,&＃39;name&＃39;:&＃39;kobe1&＃39;,
id:3,&＃39;name&＃39;:&＃39;kobe2&＃39;,
]
//需求查找数组中id为2的数据
var result&＃61;arr.findIndex((value)&＃61;>
return value.id&＃61;&＃61;&＃61;2
)
console.log(&＃39;结果&＃xff1a;&＃39;,result)


1、算术运算符

&＃43;、-、*、\\、%

2、赋值运算符

&＃61;、&＃43;&＃61;、-&＃61;、*&＃61;、&＃61;、%&＃61;、&＃43;&＃43;(用于数值的自增&＃43;1)、–(用于数值的自减-1)

3、比较运算符

&＃61;&＃61;&＃xff08;比较数据的值是否相等&＃xff0c;不会比较数据的类型&＃xff09;、99&＃61;&＃61;’99‘成立
&＃61;&＃61;&＃61;(比较数据的值是否相等、数据类型要一致)、 99&＃61;&＃61;&＃61;’99‘不成立
>&＃61;、
<&＃61;、
>、
<、
!&＃61;、

4、逻辑运算符

&&&＃xff08;与&＃xff09;、||&＃xff08;或&＃xff09;、&＃xff01;&＃xff08;非&＃xff09;

语法:

if(条件1)
条件1成立执行的代码块
else if(条件2)
条件2成立执行的代码块
else
上述条件都不成立执行的代码块



案例:

<script>
// 判断成绩等级
var score&＃61;89
if(score<60)
console.log(&＃39;你的成绩&＃xff1a;&＃39;,socre,&＃39;不及格&＃39;)
else if(score>&＃61;60 && score<80)
console.log(&＃39;你的成绩&＃xff1a;&＃39;,score,&＃39;良好&＃39;)
else
console.log(&＃39;你的成绩&＃xff1a;&＃39;,score,&＃39;优秀&＃39;)

</script>

七、函数

1、函数的定义和调用

function 函数名&＃xff08;参数1&＃xff0c;参数2&＃xff09;
函数体
return 返回值
work()


案例

function work()
console.log(&＃39;---执行了work方法---&＃39;)
return 666

work()


2、函数的参数&＃xff1a;js中函数定义的参数和调用的参数可以不一致

function work1(a,b)
console.log(&＃39;---执行了work1方法---&＃39;)
console.log(&＃39;参数a&＃39;,a)
console.log(&＃39;参数b&＃39;,b)

work1(1,2)
function work2(a,b&＃61;66)
console.log(&＃39;---执行了work1方法---&＃39;)
console.log(&＃39;参数a&＃39;,a)
console.log(&＃39;参数b&＃39;,b)

work2()


3、函数种的内置变量

arguments:保存函数调用时传入的所有参数
this&＃xff1a;类似于python中实例方法中的self&＃xff08;代表的是对象&＃xff09;

function work3()
console.log(&＃39;---执行了work3方法---&＃39;)
console.log(&＃39;arguments:&＃39;,arguments)
console.log(&＃39;this:&＃39;,this)
return 666

work3(11,22)


4、箭头函数,没有函数名

箭头函数(作为参数&＃xff0c;或者类里面定义的方法)

(参数1&＃xff0c;参数2)&＃61;>
函数体

如果函数只有1个参数&＃xff0c;才可以省略参数定义的括号()
参数&＃61;>
函数体

如果函数体里面只有1个返回值的表达式&＃xff0c;可以把函数体去掉
参数&＃61;>返回值
注意点&＃xff1a;箭头函数中定义this代表的是最外层作用域的this


1.对象的定义

方式一&＃xff1a;
var obj1&＃61;a:100,name:“kobe”
方式二&＃xff1a;
var obj2&＃61;new Object()

2、对象中属性的获取

方式一&＃xff1a;对象.属性
方式二&＃xff1a;对象[‘属性’]

var obj&＃61;
a:100,
name:&＃39;kobe&＃39;



3、对象中方法的获取

var obj&＃61;
a:100,
name:&＃39;kobe&＃39;,
//标准函数定义
work:function()
console.log(&＃39;---这个是work方法---&＃39;)
,

work2()
console.log(&＃39;---work2方法---&＃39;)
,
//箭头函数
work1:()&＃61;>
console.log(&＃39;---work1方法---&＃39;)
,



4.对象中普通函数和箭头函数的区别

箭头函数中定义this代表的是最外层作用域的this
普通函数中定义的this代表的是对象本身

var obj&＃61;
a:100,
name:&＃39;kobe&＃39;,
//标准函数定义
work:function()
console.log(&＃39;---这个是work方法---&＃39;)
console.log(&＃39;---work中的this:&＃39;,this)
,

work1()
console.log(&＃39;---work1方法---&＃39;)
console.log(&＃39;---work1中的this:&＃39;,this)
,
//箭头函数
work2:()&＃61;>
console.log(&＃39;---work2方法---&＃39;)
console.log(&＃39;---work2中的this:&＃39;,this)
,



1、语法&＃xff1a;

while(条件)
循环体



案例

var i&＃61;0
while (i<10)
console.log(&＃96;你好js 第$i次&＃96;)
i&＃43;&＃61;1


十、for循环

1、for(语句1;语句2;语句3)&＃xff1a;条件循环

语法

for(语句1;语句2;语句3)
语句1&＃xff1a;循环开始之前执行
语句2&＃xff1a;是否执行循环体的条件
语句3&＃xff1a;循环体每执行一轮最后都会执行一次语句3



案例

for (var i&＃61;0;i<10;i&＃43;&＃43;)
console.log(&＃96;你好js 第$i次&＃96;)



2、for-in&＃xff1a;遍历数组得到索引

语法

arr&＃61;[1,2,3,4,5,6]
for (i in arr)
遍历出来的i是数据的索引



案例

var arr&＃61;[11,22,33,44,55,66]
for (i in arr)
console.log(i)



3、for -of&＃xff1a;遍历数组得到值

语法

arr&＃61;[1,2,3,4,5,6]
for (i of arr)
遍历出来的i是数据的值



案例

var arr&＃61;[11,22,33,44,55,66]
for (i of arr)
console.log(i)



4、遍历对象

语法

var objA&＃61;
name:"kobe",
age:18

for (i in objA)
遍历出来的i是对象的属性名&＃xff08;key&＃xff09;



案例

var objA&＃61;
name:"kobe",
age:18

for (i in objA)
console.log(i)